<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>添加文章</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="__ADMIN_STATIC__/css/oksub.css">
	<script type="text/javascript" src="__STATIC__/lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<blockquote class="layui-elem-quote">
		<p>{$topicModel->name}</p>
	</blockquote>
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
		<!--所属分类-->
		<input type="hidden" name="category_id" value="{$topicModel->category_id}">
		<!--所属话题-->
		<input type="hidden" name="topic_id" value="{$topicModel->id}">

		<!--标题-->
		<div class="layui-form-item">
			<label class="layui-form-label">标题</label>
			<div class="layui-input-block">
				<input type="text" name="title" placeholder="请输入文章标题" autocomplete="off" class="layui-input"
				       lay-verify="required">
			</div>
		</div>
		<!--brief-->
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">文章简介</label>
			<div class="layui-input-block">
				<textarea name="brief" placeholder="请输入文章简介" class="layui-textarea"></textarea>
			</div>
		</div>
		<!-- best -->
		<div class="layui-form-item">
			<label class="layui-form-label">精品推荐</label>
			<div class="layui-input-block">
				<input type="radio" name="best" value="1" title="非精品" checked>
				<input type="radio" name="best" value="2" title="精品">
			</div>
		</div>
		<!--image-->
		<div class="layui-form-item">
			<label  class="layui-form-label">图片</label>
			<div class="layui-input-block">
				<div class="layui-upload" style="display: flex;">
					<button type="button" class="layui-btn  layui-btn-primary" id="up_btn">上传图片</button>
					<input readonly id="image_input"  class="layui-input" placeholder="文章图片" autocomplete="off" name="image">
				</div>
				<div class="layui-upload-list">
					<img src="__ADMIN_STATIC__/images/noimg.gif" width="145" height="145" class="layui-upload-img" id="topic_img">
					<p id="topic_msg"></p>
				</div>
			</div>
		</div>

		<!--可评论-->
		<div class="layui-form-item">
			<label class="layui-form-label">可评论</label>
			<div class="layui-input-block">
				<input type="checkbox" name="disallow" lay-skin="switch" lay-text="允许|禁止" checked value="0">
			</div>
		</div>

		<!--内容-->
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">内容</label>
			<div class="layui-input-block">
				<textarea id="textEditor"></textarea>
			</div>
		</div>
		<!--标签-->
		<div class="layui-form-item">
			<label class="layui-form-label">标签</label>
			<div class="layui-input-block">
				<input type="text" name="tags" placeholder="输入文章标签" autocomplete="off" class="layui-input">
				<span style="color: #999;">逗号分隔多个标签,(上限3个)</span>
			</div>
		</div>


		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="addArticle">立即发布</button>
				<button class="layui-btn layui-btn-warm" lay-submit  lay-filter="draArticle">存为草稿</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="__STATIC__/lib/layui/layui.js"></script>
<script>
	layui.extend({
		tinymce: '/static/lib/tinymce/tinymce'
	}).use(["form", "okUtils", "okLayer", 'upload','jquery','tinymce'], function () {
		let form = layui.form;
		let okUtils = layui.okUtils;
		let okLayer = layui.okLayer;
		let $ = layui.jquery;
		let upload = layui.upload;
		let tinymce = layui.tinymce;
		okLoading.close();

		//富文本编辑器
		var edit = tinymce.render({
			elem: "#textEditor"
			, height: 600
			, images_upload_url: "{:url('articleImage')}"
			//, image_prepend_url: "/storage/"
			, convert_urls: false
			,fontsize_formats: '12px 14px 16px 18px 24px 36px'
		});
		form.on("submit(addArticle)", function (data) {
			let content = edit.getContent();
			if ( !content ){
				layer.msg('内容不能为空.');
				return false;
			}
			let fields = $.extend(data.field,{content:content});
			okUtils.ajax("{:url('save',['topic_id'=>$topicModel->id,'status'=>1])}", "post", fields, true).done(function (response) {
				okLayer.greenTickMsg(response.msg, function () {
					parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
			}).fail(function (error) {
				console.log(error)
			});
			return false;
		});
		form.on("submit(draArticle)", function (data) {
			let content = edit.getContent();
			if ( !content ){
				layer.msg('内容不能为空.');
				return false;
			}
			let fields = $.extend(data.field,{content:content});
			okUtils.ajax("{:url('save',['topic_id'=>$topicModel->id,'status'=>2])}", "post", fields, true).done(function (response) {
				okLayer.greenTickMsg(response.msg, function () {
					parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
			}).fail(function (error) {
				console.log(error)
			});
			return false;
		});


		//图片上传
		var uploadInst = upload.render({
			elem: '#up_btn'
			,url: "{:url('uploadArticleImage')}"
			,field : 'article_cover'
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#topic_img').attr('src', result); //图片链接（base64）
				});
			}
			,done: function(res){
				//如果上传失败
				if(res.code > 0){
					return layer.msg('上传失败');
				}
				//上传成功
				$('#image_input').val(res.data['src']);
			}
			,error: function(){
				//演示失败状态，并实现重传
				var demoText = $('#topic_msg');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function(){
					uploadInst.upload();
				});
			}
		});
	});
</script>
</body>
</html>
